<template>
  <view class="animation-container">
    <!-- 金币飞行动画 -->
    <view 
      v-for="(coin, index) in flyingCoins" 
      :key="index"
      class="flying-coin"
      :style="coin.style"
    >
      <text class="coin-icon">🪙</text>
    </view>
    
    <!-- 信任值变化动画 -->
    <view 
      v-if="trustChangeAnimation.show"
      class="trust-change-animation"
      :style="trustChangeAnimation.style"
    >
      <text class="trust-change-text" :class="trustChangeAnimation.type">
        {{ trustChangeAnimation.value > 0 ? '+' : '' }}{{ trustChangeAnimation.value }}
      </text>
    </view>
    
    <!-- 成就解锁动画 -->
    <view 
      v-if="achievementAnimation.show"
      class="achievement-unlock"
      :style="achievementAnimation.style"
    >
      <view class="achievement-card">
        <text class="achievement-icon">🏆</text>
        <text class="achievement-text">成就解锁！</text>
        <text class="achievement-name">{{ achievementAnimation.name }}</text>
      </view>
    </view>
    
    <!-- 卡牌使用特效 -->
    <view 
      v-if="cardEffectAnimation.show"
      class="card-effect"
      :style="cardEffectAnimation.style"
    >
      <view class="effect-particles">
        <view 
          v-for="i in 6" 
          :key="i"
          class="particle"
          :style="{ 
            animationDelay: (i * 0.1) + 's',
            transform: `rotate(${i * 60}deg)`
          }"
        ></view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'GameAnimation',
  data() {
    return {
      flyingCoins: [],
      trustChangeAnimation: {
        show: false,
        style: {},
        value: 0,
        type: ''
      },
      achievementAnimation: {
        show: false,
        style: {},
        name: ''
      },
      cardEffectAnimation: {
        show: false,
        style: {}
      }
    }
  },
  methods: {
    // 金币飞行动画
    playCoinFlight(startX, startY, endX, endY, amount) {
      for (let i = 0; i < Math.min(amount, 5); i++) {
        const coin = {
          style: {
            position: 'fixed',
            left: startX + (i * 20) + 'rpx',
            top: startY + (i * 10) + 'rpx',
            zIndex: 9999,
            animation: `coinFlight${i} 1s ease-out forwards`
          }
        }
        
        this.flyingCoins.push(coin)
        
        // 设置动画关键帧
        this.setCoinAnimation(startX + (i * 20), startY + (i * 10), endX, endY, i)
        
        // 1秒后移除
        setTimeout(() => {
          this.flyingCoins.splice(this.flyingCoins.indexOf(coin), 1)
        }, 1000)
      }
    },
    
    setCoinAnimation(startX, startY, endX, endY, index) {
      const keyframes = `
        @keyframes coinFlight${index} {
          0% {
            transform: translate(0, 0) scale(1);
            opacity: 1;
          }
          50% {
            transform: translate(${(endX - startX) / 2}rpx, ${(endY - startY) / 2 - 50}rpx) scale(1.2);
            opacity: 0.8;
          }
          100% {
            transform: translate(${endX - startX}rpx, ${endY - startY}rpx) scale(0.5);
            opacity: 0;
          }
        }
      `
      
      // 动态添加CSS
      const style = document.createElement('style')
      style.textContent = keyframes
      document.head.appendChild(style)
      
      // 动画结束后移除样式
      setTimeout(() => {
        document.head.removeChild(style)
      }, 1000)
    },
    
    // 信任值变化动画
    playTrustChange(value, x, y) {
      this.trustChangeAnimation = {
        show: true,
        style: {
          position: 'fixed',
          left: x + 'rpx',
          top: y + 'rpx',
          zIndex: 9999
        },
        value: value,
        type: value > 0 ? 'positive' : 'negative'
      }
      
      // 动画效果
      setTimeout(() => {
        this.trustChangeAnimation.style.transform = 'translateY(-50rpx)'
        this.trustChangeAnimation.style.opacity = '0'
      }, 100)
      
      // 2秒后隐藏
      setTimeout(() => {
        this.trustChangeAnimation.show = false
      }, 2000)
    },
    
    // 成就解锁动画
    playAchievementUnlock(name) {
      this.achievementAnimation = {
        show: true,
        style: {
          position: 'fixed',
          right: '20rpx',
          top: '100rpx',
          zIndex: 9999
        },
        name: name
      }
      
      // 动画效果
      setTimeout(() => {
        this.achievementAnimation.style.transform = 'translateX(0)'
        this.achievementAnimation.style.opacity = '1'
      }, 100)
      
      // 3秒后隐藏
      setTimeout(() => {
        this.achievementAnimation.show = false
      }, 3000)
    },
    
    // 卡牌使用特效
    playCardEffect(x, y, cardType) {
      this.cardEffectAnimation = {
        show: true,
        style: {
          position: 'fixed',
          left: x + 'rpx',
          top: y + 'rpx',
          zIndex: 9999
        }
      }
      
      // 1秒后隐藏
      setTimeout(() => {
        this.cardEffectAnimation.show = false
      }, 1000)
    },
    
    // 数值跳动动画
    playNumberBounce(element, newValue) {
      const animation = uni.createAnimation({
        duration: 300,
        timingFunction: 'ease-out'
      })
      
      animation.scale(1.2).step()
      animation.scale(1).step()
      
      // 更新数值
      if (element) {
        element.textContent = newValue
      }
    }
  }
}
</script>

<style scoped>
.animation-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9998;
}

/* 金币飞行动画 */
.flying-coin {
  position: fixed;
  font-size: 32rpx;
  z-index: 9999;
  pointer-events: none;
}

/* 信任值变化动画 */
.trust-change-animation {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transition: all 0.5s ease-out;
}

.trust-change-text {
  font-size: 32rpx;
  font-weight: bold;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10rpx);
}

.trust-change-text.positive {
  color: #28a745;
  border: 2rpx solid rgba(40, 167, 69, 0.3);
}

.trust-change-text.negative {
  color: #dc3545;
  border: 2rpx solid rgba(220, 53, 69, 0.3);
}

/* 成就解锁动画 */
.achievement-unlock {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
  transform: translateX(100%);
  opacity: 0;
  transition: all 0.5s ease-out;
}

.achievement-card {
  background: linear-gradient(135deg, #ffd700, #ffed4e);
  border-radius: 16rpx;
  padding: 20rpx;
  box-shadow: 0 8rpx 24rpx rgba(255, 215, 0, 0.4);
  border: 2rpx solid #ffd700;
  text-align: center;
  min-width: 200rpx;
}

.achievement-icon {
  font-size: 40rpx;
  display: block;
  margin-bottom: 8rpx;
  animation: achievementBounce 0.6s ease-out;
}

.achievement-text {
  display: block;
  font-size: 24rpx;
  font-weight: bold;
  color: #8b4513;
  margin-bottom: 4rpx;
}

.achievement-name {
  display: block;
  font-size: 20rpx;
  color: #8b4513;
  font-weight: 500;
}

/* 卡牌使用特效 */
.card-effect {
  position: fixed;
  z-index: 9999;
  pointer-events: none;
}

.effect-particles {
  position: relative;
  width: 100rpx;
  height: 100rpx;
}

.particle {
  position: absolute;
  width: 8rpx;
  height: 8rpx;
  background: radial-gradient(circle, #4a90e2, #357abd);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform-origin: 0 0;
  animation: particleExplode 1s ease-out forwards;
}

/* 动画关键帧 */
@keyframes achievementBounce {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes particleExplode {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 1;
  }
  50% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.8;
  }
  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

/* 移动端优化 */
@media (max-width: 768rpx) {
  .flying-coin {
    font-size: 28rpx;
  }
  
  .trust-change-text {
    font-size: 28rpx;
    padding: 6rpx 12rpx;
  }
  
  .achievement-card {
    padding: 16rpx;
    min-width: 160rpx;
  }
  
  .achievement-icon {
    font-size: 32rpx;
  }
  
  .achievement-text {
    font-size: 20rpx;
  }
  
  .achievement-name {
    font-size: 16rpx;
  }
}
</style>

